<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="shortcut icon" href="/static/img/kurento.png" type="image/png"/>

    <link rel="stylesheet"
          href="webjars/bootstrap/3.3.6/dist/css/bootstrap.min.css">
    <link rel="stylesheet"
          href="webjars/ekko-lightbox/4.0.2/dist/ekko-lightbox.min.css">
    <link rel="stylesheet" href="/static/css/kurento.css">
    <link rel="stylesheet" href="/static/css/group.css">

    <script src="webjars/jquery/1.12.3/dist/jquery.min.js"></script>
    <script src="webjars/bootstrap/3.3.6/dist/js/bootstrap.min.js"></script>
    <script src="webjars/ekko-lightbox/4.0.2/dist/ekko-lightbox.min.js"></script>
    <script src="webjars/webrtc-adapter/6.1.0/release/adapter.js"></script>

    <script src="/static/js/Screen-Capturing.js"></script>
    <script src="js/kurento-utils.js"></script>
    <script src="/static/js/index.js"></script>
    <script th:inline="javascript">
        var username = [[${session.SPRING_SECURITY_CONTEXT.authentication.principal.username}]];
        initName(username);
    </script>
    <title>Kurento</title>
</head>
<body>

<div id="container">
    <div id="wrapper">
        <div id="join" class="animate join">
            <h1>Join a Room</h1>
            <form onsubmit="register(); return false;" accept-charset="UTF-8">
                <p>
                    <input type="text" name="room" value="" id="roomName"
                           placeholder="Room" required>
                </p>
                <p class="submit">
                    <input type="submit" name="commit" value="Join!">
                </p>
            </form>
        </div>

        <div id="room" style="display: none;" class="row">
            <h2 id="room-header"></h2>
            <div class="col-sm-9">
                <div id="videoBig">
                    <video id="screenVideo" autoplay style="width: 100%;height:auto;margin-left: 40px;max-height: max-content;"
                           poster="/static/img/webrtc.png"></video>
                </div>
            </div>
            <div class="col-sm-3">
                <video id="video" autoplay width="320px" height="240px"
                       poster="/static/img/webrtc.png"></video>
                <div class="row">
                    <div class="col-md-12">
                        <a id="stop" href="#" class="btn btn-danger"><span
                                class="glyphicon glyphicon-stop"></span> Stop</a>
                    </div>
                </div>
                <br>
                <span id="onlineCount"></span>
            </div>
        </div>
    </div>
</div>

</body>
</html>
